<template>
  <div id="app">
    <div class="warmp">
      <div class="header">
        <Header></Header>
      </div>
      <div class="main">
        <Sitbar></Sitbar>

        <div class="contment">
          <router-view></router-view>
        </div>
      </div>
      <div class="foot-class"></div>
      <FootPlayMusic></FootPlayMusic>
    </div>
  </div>
</template>

<script>
import Sitbar from "./components/Sitbar";
import Header from "./components/Header";

import FootPlayMusic from "./components/FootPlayMusic";
export default {
  // name: "App",
  components: {
    Sitbar,
    FootPlayMusic,
    Header,
  },
  // methods: {
  //   divclick() {
  //     this.$store.commit("increment");
  //   },
  // },
};
</script>

<style lang='less' scoped>
.warmp {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; //竖方向
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  // background-color: #db1a35;
  background-color: #ffb6c1;
}

.main {
  flex: 1;

  overflow: hidden;
  margin: 50px 0 0 0;

  display: flex;

  .contment {
    padding: 0 40px;
    flex: 1;
    height: 100%;
    overflow: auto;
    //底部滚动条
    overflow-x: hidden;
  }
}
.foot-class {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  //background: rosybrown;
  // background-color: rgb(255, 255, 255);
  border-top: 1px solid #ddd;
}
</style>
